import React from 'react';
import { View, Text, Modal, Image, Dimensions, TouchableOpacity, Platform, SafeAreaView } from 'react-native';
import constants from '../utils/constants';
import topView from 'rn-topview'
import { Carousel } from 'antd-mobile-rn';

const window = Dimensions.get("window");

class ShowSubjectImages extends React.Component {


    state = {
        visible: true
    }


    constructor(props) {
        super(props);




    }

    _close = () => {
        this.setState({
            visible: false
        });
        if (this.props.onClose) {
            this.props.onClose();
        }
    }
    _onCancel = () => {

        this._close();


    }

    _onOk = () => {

        this._close();
        if (this.props.onOk) {
            this.props.onOk();
        }

    }



    render() {



        const item = this.props.item;

        console.log("item=>", item)

        return (

            <Modal visible={this.state.visible} animationType="slide" onRequestClose={() => {
                this.setState({
                    visible: false
                })
                this._onCancel();
            }}>
                <SafeAreaView style={{flex:1}}>
                    <View style={{ flex: 1, backgroundColor: "#fff", paddingTop: Platform.OS == "android" ? 0 : 20,marginBottom:20 }}>
                        <Carousel
                            style={{
                                height: window.height - 40
                            }}
                        >
                            {
                                
                                item.images.map((img, index) => {
                                    return (<View key={index} style={{ flex: 1 }}>
                                        <TouchableOpacity activeOpacity={1} onPress={() => {
                                            this._close();
                                        }}>
                                            <Image resizeMode={"contain"} style={{ width: window.width, height: window.height-40 }} source={{ uri: img }} ></Image>
                                        </TouchableOpacity>
                                    </View>)
                                })
                            }

                        </Carousel>

                    </View>
                </SafeAreaView>
            </Modal>



        )
    }
}

export default (item) => {
    return new Promise((resolve, reject) => {
        topView.set(
            <ShowSubjectImages
                item={item}
                onClose={() => { topView.remove(); }}
                onOk={(value) => {
                    resolve(value);
                }}
            />
        )
    });
}